<template>
  <div class="long-comments">
    <header>
      <span class="title">长评</span>
    </header>
    <div class="comments">
      <article
        class="no-padding-top"
        v-for="item in filmReviews"
        :key="item.id"
      >
        <div class="comment-wrap">
          <div>
            <img :src="item.author.avatarurl" alt="" />
          </div>
          <div class="right">
            <div class="top">
              <div>
                <div class="name-box">
                  <span class="name">{{ item.author.nickName }}</span>
                </div>
                <div class="commentstar">
                  <div class="star-wrap">
                    <span class="star-score">10</span>
                    <span class="star-word">分</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="middle">
              <div class="comment-title">{{ item.title }}</div>
              <div class="comment-content">{{ item.text }}</div>
            </div>
            <div class="bottom">
              <span>{{ item.created | formatDate }}</span>
              <div class="right">
                <div class="goto-comments">
                  <img src="../assets/img/replying-comments.png" alt="" />
                  <span class="comments-num">{{
                    item.commentCount
                  }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/data.js";
export default {
  props: { filmReviews: Array },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "MM-dd");
    },
  },
};
</script>

<style lang="less" scoped>
.long-comments {
  margin-top: 12px;
  background-color: #fff;
  header {
    display: flex;
    justify-content: space-between;
    padding: 13px 16px 14px;
    .title {
      font-size: 15px;
      color: #333;
    }
  }
  .comments {
    .no-padding-top {
      padding-top: 0;
      padding: 12px 15px;
      .comment-wrap {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        div {
          img {
            height: 34px;
            width: 34px;
            border-radius: 50%;
          }
        }
        .right {
          margin-left: 11px;
          .top {
            display: flex;
            justify-content: space-between;
            div {
              .name-box {
                display: flex;
                align-items: center;
                .name {
                  font-size: 12px;
                  color: #333;
                }
              }
              .commentstar {
                display: flex;
                flex-direction: row;
                justify-content: start;
                align-items: center;
                .star-wrap {
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .star-score {
                    font-size: 12px;
                    color: #faaf00;
                    font-family: PingFangSC-Regular;
                    display: block;
                    transform: scale(0.92);
                  }
                  .star-word {
                    transform: scale(0.75);
                    font-size: 12px;
                    color: #faaf00;
                    font-family: PingFangSC-Regular;
                    display: block;
                  }
                }
                .commentstar-buyticket {
                  border: 0.5px solid #4f89b3;
                  border-radius: 10px;
                  padding: 0 5px;
                  font-family: PingFangSC-Regular;
                  color: #4f89b3;
                  font-size: 12px;
                  text-align: center;
                  display: block;
                  transform: scale(0.75);
                }
              }
            }
          }
          .middle {
            margin-top: 5px;
            .comment-title {
              line-height: 21px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              text-overflow: ellipsis;
              word-wrap: break-word;
              word-break: break-all;
              overflow: hidden;
              font-size: 15px;
              color: #333;
            }
            .comment-content {
              font-size: 13px;
              color: #666;
              line-height: 21px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              text-overflow: ellipsis;
              word-wrap: break-word;
              word-break: break-all;
              overflow: hidden;
            }
          }
          .bottom {
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #999;
            span {
              font-size: 12px;
              color: #999;
            }
            .right {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .goto-comments {
                margin-left: 10px;
                width: 55px;
                border-radius: 100px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                  margin-right: 4px;
                  width: 12px;
                  aspect-ratio: auto 12 / 11;
                  height: 11px;
                }
                .comments-num {
                  font-size: 12px;
                  color: #999;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>